<template>
    <div id="picking_list">
        <el-card>
            <div class="check_box">
                <el-row :gutter="20" style="margin-bottom: 10px">
                    <el-col :span="4">
                        <div class="grid-content">
                            <el-input size="mini" suffix-icon="el-icon-search" v-model="orderId" placeholder="请输入查询单号" @change="handleChange" clearable></el-input>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="grid-content">
                            <el-select class="select-prefix" size="mini" v-model="senderStore" placeholder="请选择门店" filterable @change="handleChange" clearable>
                                <template slot = "prefix">
                                    <span class = 'prefixSlot'>调出门店</span>
                                </template>
                                <el-option-group
                                v-for="group in storeList"
                                :key="group.cityId"
                                :label="group.city">
                                    <el-option
                                        v-for="item in group.list"
                                        :key="item.storeNo"
                                        :label="item.storeName"
                                        :value="item.storeName">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="grid-content">
                            <el-select class="select-prefix" size="mini" v-model="receiverStore" placeholder="请选择门店" filterable @change="handleChange" clearable>
                                <template slot = "prefix">
                                    <span class = 'prefixSlot'>调入门店</span>
                                </template>
                                <el-option-group
                                v-for="group in storeList"
                                :key="group.cityId"
                                :label="group.city">
                                    <el-option
                                        v-for="item in group.list"
                                        :key="item.storeNo"
                                        :label="item.storeName"
                                        :value="item.storeName">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </div>
                    </el-col> 
                    <el-col :span="5">
                        <div class="grid-content">
                            <el-select class="select-prefix" size="mini" v-model="createUserId" placeholder="请选择申请人" filterable clearable @change="handleChange">
                                <template slot = "prefix">
                                    <span class = 'prefixSlot'>申请人</span>
                                </template>
                                
                                <el-option
                                    v-for="item in userList"
                                    :key="item.userId"
                                    :label="item.personName"
                                    :value="item.userId">
                                </el-option>
                              
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="grid-content">
                            <el-select class="select-prefix" size="mini" v-model="stockoutStatus" placeholder="请选择状态" filterable @change="handleChange">
                                <template slot = "prefix">
                                    <span class = 'prefixSlot'>出库状态</span>
                                </template>
                                <el-option
                                    v-for="item in $Options.pickingStatus"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>  
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="grid-content">
                            <el-date-picker
                            size="mini"
                            v-model="time"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="handleChange"
                            >
                            </el-date-picker>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content col_float_right">
                           <el-button type="primary" size="small" @click="handleBatchLogistics">确认发货</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>

        </el-card>
        <el-card class="mg-t-10">
            <el-table stripe :data='tableData' border @selection-change="handleSelectionVal" @select-all="handleSelectAll" @select="handleSelect">
                <el-table-column type="selection" :selectable="handleSelectable" ></el-table-column>
                <el-table-column label="调拨单号" prop="transferOrderId" show-overflow-tooltip></el-table-column>
                <el-table-column label="出库单号" prop="stockOutOrderId" show-overflow-tooltip></el-table-column>
                <el-table-column label="出库类型" >
                    <template slot-scope="scope">
                       {{scope.row.stockoutType == 21 ? '销售出库' : scope.row.stockoutType == 22 ? '调拨出库' : scope.row.stockoutType == 23 ? '盘点出库' : '其他出库'}}
                    </template>
                </el-table-column>
                <el-table-column label="申请日期" prop="gmtCreate" width="100" show-overflow-tooltip></el-table-column>
                <el-table-column label="品牌" prop="brandName" width="100" show-overflow-tooltip></el-table-column>
                <el-table-column label="调出/调入" prop="inWarehouse2outWarehouse" show-overflow-tooltip></el-table-column>
                <el-table-column label="调拨/出库" width="80">
                    <template slot-scope="scope">
                        {{scope.row.totalTransfer + '/' +scope.row.totalGoods}}
                    </template>
                </el-table-column>
                <el-table-column label="出库人" prop="bizUser"  width="80" ></el-table-column>
                <el-table-column label="出库日期" prop="gmtCompleted" width="100" show-overflow-tooltip></el-table-column>
                <el-table-column label="出库状态" width="80">
                    <template slot-scope="scope">
                        <el-tag size="small" :type="scope.row.stockoutStatus === 0 ? 'warning' : scope.row.stockoutStatus === 1 ? 'danger' : scope.row.stockoutStatus ===2 ? 'success' : '' ">
                            {{scope.row.stockoutStatus === 0 ? '待出库' : scope.row.stockoutStatus === 1 ? '待发货' : scope.row.stockoutStatus === 2 ? '已发货' : ''}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="快递信息" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{(scope.row.expressName ? scope.row.expressName : '--') + '/' +(scope.row.expressOrderId ? scope.row.expressOrderId : '--')}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-dropdown size="small" type="text" trigger="click" placement="bottom-start">
                                <span class="el-dropdown-link" style="font-size: 12px; cursor: pointer">
                                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown" >
                                    <el-dropdown-item command="a" @click.native="handleClickCheck(scope.row)" >查看</el-dropdown-item>
                                    <el-dropdown-item v-if="scope.row.stockoutStatus === 1" command="a" @click.native="handleClickEdit(scope.row)" >发货</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <page v-if="total" :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
            <pickingDetails v-if='isShowDetails' :isShowDetails="isShowDetails" :stockOutOrderId="stockOutOrderId" :stockoutId="stockoutId"  :transferId="transferId" @cancelShow="cancelShow" :stockoutStatus="nowstockoutStatus"></pickingDetails>
            <logistics v-if="isShowLogistics" :isShow="isShowLogistics"  :title="transferOrderIds" :stockoutId="stockoutId"  @getPickingList="getPickingList" :totalGoods="totalGoods" :totalBrand="totalBrand"  @cancelShow="cancelShow"></logistics>
        </el-card>
    </div>
</template>
<script>
    import page from '../../commonComponents/page'
    import pickingDetails from './pickingDetails'
    import logistics from '../../commonComponents/logistics'
    export default {
        components: {page, pickingDetails, logistics},
        data() {
            return {
                orderId: '',
                receiverStore: '',
                senderStore: '',
                time: [],
                createUserId: '',
                tableData: [],
                page: 1,
                size: 10,
                total: 0,
                stockoutStatus: '',
                isShowDetails: false, /**调拨任务查看 */
                isShowLogistics: false, /** 物流信息 */
                title: '',
                storeList: [],
                userList: [],
                stockoutId: '',
                transferId: '',
                stockoutIdList: [],
                type: '1', // 1:单个物流， 2:批量物流
                transferOrderIds: [],
                nowstockoutStatus: '',
                stockOutOrderId: '',
                totalBrand: 0,
                totalGoods: 0,
                goodsNum: []
            }
        },
        mounted() {
            this.getStoreListByGroup()
            this.getUsetList()
            this.getPickingList()
        },
        methods: {
            handleChange() {
                this.total= 0
                this.page= 1
                this.getPickingList()
            },
            /**获取用户 */
            getUsetList() {
                this.$server.systemControlApi.getUserList().then(res => {
                    this.userList= res.data
                })
            },
            getStoreListByGroup() {
                this.$server.systemControlApi.getStoreListByGroup().then(res => {
                    this.storeList= res.data
                })
            },
           
            getPickingList() {
                try{
                    let query= {
                        page: this.page,
                        size: this.size
                    }
                    let params= {
                        createUserId: this.createUserId,
                        gmtCreateBegin: this.time && this.time.length > 0 ? this.formate(new Date(this.time[0].getTime()), 'yyyy-MM-dd hh:mm:ss') : '',
                        gmtCreateEnd: this.time && this.time.length > 0 ? this.formate(new Date(this.time[1].getTime()), 'yyyy-MM-dd hh:mm:ss') : '',
                        receiverStore: this.receiverStore,
                        orderId: this.orderId,
                        senderStore: this.senderStore,
                        stockoutStatus: this.stockoutStatus
                    }
                    this.$server.stockControlApi.getPickingList(query, params).then(res => {
                        this.tableData= res.data
                        this.total= res.total
                    })
                } catch(err) {this.$paramsError(err)}
            },
          
            handlePageChange(page) {
                this.page= page
                this.getPickingList()
            },
            handleSizeChange(size) {
                this.size= size
                this.getPickingList()
            },
            /** 表格操作项 */
            handleClickCheck(scope) {
                // 查看
                this.stockOutOrderId= scope.stockOutOrderId
                this.nowstockoutStatus= scope.stockoutStatus
                this.stockoutId= scope.stockoutId
                this.transferId= scope.transferId
                this.isShowDetails= true
            },
            handleClickEdit(scope) {
                // 编辑物流
                this.type= '1'
                this.totalGoods= scope.totalGoods
                this.totalBrand= 1
                this.transferOrderIds= [scope.transferOrderId]
                this.stockoutId= [scope.stockoutId]
                this.isShowLogistics= true
            },

            /**批量物流 */
            handleBatchLogistics() {
                this.type= '2'
                this.transferOrderIds=''+ this.transferOrderIds
                this.stockoutId= this.stockoutIdList
                this.totalBrand= this.stockoutIdList.length
                let sum= 0
                if(this.goodsNum.length > 1) {

                    for(let i=0; i< this.goodsNum.length; i++) {
                        sum +=  this.goodsNum[i]
                    }
                }else if(this.goodsNum.length == 1){
                    sum= this.goodsNum[0]
                }else{
                    sum= 0
                }
                this.totalGoods= sum
                this.isShowLogistics= true
            },
            cancelShow(title) {
                this.isShowLogistics= title
                this.isShowDetails= title
            },
            handleSelectionVal(val) {
                this.stockoutIdList= []
                this.transferOrderIds= []
                this.goodsNum= []
                val.forEach(item => {
                    if(this.stockoutIdList.indexOf(item.stockoutId) == -1) {
                        this.stockoutIdList.push(item.stockoutId)
                        this.goodsNum.push(item.totalGoods)
                    }
                    if(this.transferOrderIds.indexOf(item.transferOrderId) == -1) {
                        this.transferOrderIds.push(item.transferOrderId)
                    }  
                })
            },
            handleSelectAll(val) {
                val.forEach(item => {
                    if(this.stockoutIdList.indexOf(item.stockoutId) == -1) {
                        this.stockoutIdList.push(item.stockoutId)
                    }
                    if(this.transferOrderIds.indexOf(item.transferOrderId) == -1) {
                        this.transferOrderIds.push(item.transferOrderId)
                    }
                })
            },
            handleSelect(val, row) {
                console.log(row)
            },
            handleSelectable(row, index) {
                if(row.stockoutStatus == 1) {
                    return true;
                }else{
                    return false;
                }
            }


        }
    }
</script>